<template>
    <div>
        <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>{{ title }}</span>
                </div>
            </template>
            <div>
                <!-- 学生课程列表 -->
                <el-row v-if="this.user.data.rolename == '学生'">
                    <el-col :span="8" v-for="(item, index) in getCourse" :key="index">
                        <el-card shadow="hover" style="background: floralwhite;margin-top: 20px;margin-left:8px ;">
                            <div slot="header" style="color: coral">{{ item.courseName }}</div>
                            <div>授课教师:&nbsp;{{ item.name }}</div>
                            <div>&nbsp;</div>
                            <div>联系方式:&nbsp;{{ item.phone }}</div>
                            <div>&nbsp;</div>
                            <div>开放时间:&nbsp;{{ item.startTime }} - {{ item.endTime }}</div>
                            <div class="coldiv">
                                <el-button type="primary"
                                    @click="change(item.courseName, item.courseid, item.name, item.startTime, item.endTime,item.classid)">立即查看</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 教师课程列表 -->
                <el-row v-if="this.user.data.rolename == '教师'">
                    <el-col :span="8" v-for="(item, index) in getCourse" :key="index">
                        <el-card shadow="hover" style="background: floralwhite;margin-top: 20px;margin-left:8px ;">
                            <div slot="header" style="color: coral">{{ item.courseName }}</div>
                            <div>授课班级:&nbsp;{{ item.classname }}</div>
                            <div>&nbsp;</div>
                            <div>开放时间:&nbsp;{{ item.startTime }} - {{ item.endTime }}</div>
                            <div class="coldiv">
                                <el-button type="primary"
                                    @click="teachange(item.courseName, item.courseid, item.classid, item.startTime, item.endTime)">立即查看</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-empty v-if="this.getCourse == ''" description="暂无课程信息，请联系管理员分配相关课程！"
                    style="display: flex"></el-empty>
            </div>
        </el-card>

    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    data() {

        return {
            title: '',
            //从本地存储获取user数据
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            //获取用户课程信息列表数据模型
            getCourse: {
                id: '',
                courseid: '',
                classid: '',
                courseName: '',
                name: '',
                startTime: '',
                endTime: '',
                phone: ''
            }
        };
    },
    methods: {
        //获取学生用户课程信息列表
        getStuCourseMsg() {
            request.get("/share/getStulist", {
                params: {
                    id: this.user.data.userid
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data)
                    this.$message.success("成功获取课程信息")
                    this.getCourse = res.data.data
                } else {
                    this.$message.error("获取课程信息失败")
                }
            })
        },
        //获取教师用户课程信息列表
        getTeaCourseMsg() {
            request.get("/share/getTealist", {
                params: {
                    id: this.user.data.userid
                }
            }).then(res => {
                if (res.data.code == '0') {
                    this.$message.success("成功获取课程信息")
                    this.getCourse = res.data.data
                } else {
                    this.$message.error("获取课程信息失败")
                }
            })
        },
        //学生跳转页面方法
        change(name, id, teaname, startTime, endTime,classid) {
            const start = new Date(startTime)
            const end = new Date(endTime)
            const current = new Date()

            if (start > current) {
                this.$message.error("课程未开放!!!")
            } else if (end < current) {
                this.$message.error("课程已截至!!!")
            } else {
                this.$router.push({ path: '/StuCourse:courseName:courseId:teaName:classId', query: { courseName: name, courseId: id, teaName: teaname,classId: classid} });
            }

        },
        //老师跳转页面方法
        teachange(name, id, cid, startTime, endTime) {
            const start = new Date(startTime)
            const end = new Date(endTime)
            const current = new Date()
            if (start > current) {
                this.$message.error("课程未开放！！！")
            } else if (end < current) {
                this.$message.error("课程已截至！！！")
            } else {

                this.$router.push({ path: "/TeaCourse:courseName:courseId:classId", query: { courseName: name, courseId: id, classId: cid } })
            }
        }

    },
    created() {
        if (this.user.data.rolename == '学生') {
            this.getStuCourseMsg()
            this.title = '学生课程信息'
        } else {
            this.getTeaCourseMsg()
            this.title = '教师课程信息'
        }

    }
}
</script>

<style scoped lang="less">
.coldiv {
    display: flex;
    justify-content: right;

    .el-button {
        width: 100px;
        margin-top: 20px;

    }
}
</style>